<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane label="设计器" name="designer" />
      <el-tab-pane label="渲染器" name="create" />
    </el-tabs>
    <div v-if="activeName==='designer'" style="flex: 1;">
      <fc-designer ref="formDesigner" height="100%" :config="config" :handle="handle" @save="handleSaveFormConfig" />
    </div>
    <div v-if="activeName==='create'" style="flex: 1;">
      <el-button type="primary" @click="demo2">回填</el-button>
      <form-create
        ref="formCreater"
        :rule="testRules"
        :option="formCreaterOption"
        :value="formCreaterValue" />
      <div>提交的内容：{{ formCreaterValue }}</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testRules: [{ 'type': 'input', 'field': 'F07zm06sgxyoabc', 'title': '用户名', 'info': '', '$required': '请输入用户名', '_fc_id': 'id_F7q7m06sgxyoacc', 'name': 'ref_F6mjm06sgxyoadc', 'display': true, 'hidden': false, '_fc_drag_tag': 'input' }, { 'type': 'input', 'field': 'Fzrwm06sgz18aec', 'title': '密码', 'info': '', '$required': '请输入密码', 'props': { 'type': 'password' }, '_fc_id': 'id_F7yrm06sgz18afc', 'name': 'ref_F3m6m06sgz18agc', 'display': true, 'hidden': false, '_fc_drag_tag': 'password' }],
      activeName: 'designer',
      config: {
        // 隐藏拖拽操作按钮
        hiddenDragMenu: false,
        // 隐藏拖拽按钮
        hiddenDragBtn: false,
        // 是否显示保存按钮
        showSaveBtn: true,
        // 是否显示右侧的配置界面
        showConfig: true,
        // 是否显示组件的基础配置表单
        showBaseForm: true,
        // 是否显示组件联动
        showControl: true,
        // 是否显示模块管理
        showPageManage: true,
        // 是否显示组件的高级配置表单
        showAdvancedForm: true,
        // 是否显示组件的属性配置表单
        showPropsForm: true,
        // 是否显示组件的样式配置表单
        showStyleForm: true,
        // 是否显示组件的事件配置表单
        showEventForm: true,
        // 是否显示组件的验证配置表单
        showValidateForm: true,
        // 是否显示表单配置
        showFormConfig: true,
        // 是否显示左侧的模板列表
        showTemplate: true,
        // 是否显示多端适配选项
        showDevice: true
      },
      handle: [{
        label: '扩展按钮',
        handle: () => {
          this.$modal.msgSuccess('我是扩展按钮示例触发的方法')
        }
      }],
      formCreaterValue: {
        'F07zm06sgxyoabc': 'admin'
      },
      formCreaterOption: {
        form: {
          hideRequiredAsterisk: false,
          inline: false,
          labelPosition: 'right',
          labelWidth: '125px',
          size: 'default'
        },
        submitBtn: {
          show: true,
          innerText: '保存'
        },
        onSubmit: (formData) => {
          console.log(formData)
          this.formCreaterValue = formData
        }
      }
    }
  },
  mounted() {
    if (this.activeName === 'designer') {
      this.$refs.formDesigner.setRule(this.testRules)
    }
  },
  methods: {
    handleSaveFormConfig() {
      console.log('表单JSON渲染规则', this.$refs.formDesigner.getJson())
      console.log('表单渲染规则', this.$refs.formDesigner.getRule())
      console.log('表单配置', this.$refs.formDesigner.getOption())
      return true
    },
    demo2() {
      this.formCreaterValue = {
        'F07zm06sgxyoabc': 'lijian'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
